<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>新增员工 - 人力资源管理系统</title>
  <style>
    /* 复用基础样式 */
    body {
      margin: 0;
      font-family: 'Segoe UI', 'Microsoft YaHei', Arial, sans-serif;
      background: #f5f7fa;
    }
    .layout {
      display: flex;
      height: 100vh;
    }
    .sidebar {
      width: 220px;
      background: #232a3b;
      color: #fff;
      display: flex;
      flex-direction: column;
      padding-top: 16px;
    }
    .sidebar h2 {
      font-size: 20px;
      font-weight: bold;
      margin: 0 0 32px 24px;
      letter-spacing: 2px;
    }
    .sidebar ul {
      list-style: none;
      padding: 0 0 0 24px;
      margin: 0;
    }
    .sidebar li {
      margin-bottom: 18px;
      font-size: 16px;
      opacity: 0.85;
      cursor: pointer;
    }
    .sidebar li.active {
      color: #40a9ff;
      font-weight: bold;
    }
    .main {
      flex: 1;
      display: flex;
      flex-direction: column;
    }
    .topbar {
      height: 56px;
      background: #fff;
      display: flex;
      align-items: center;
      padding: 0 32px;
      border-bottom: 1px solid #e5e6eb;
      justify-content: space-between;
    }
    .topbar .title {
      font-size: 18px;
      font-weight: bold;
      color: #232a3b;
    }
    .topbar .user {
      display: flex;
      align-items: center;
      gap: 12px;
    }
    .content {
      flex: 1;
      padding: 24px 32px;
      overflow-y: auto;
    }

    /* 新增样式 */
    .mode-switch {
      display: flex;
      gap: 16px;
      margin-bottom: 24px;
    }
    .mode-button {
      flex: 1;
      padding: 16px;
      border: 2px solid #e5e6eb;
      border-radius: 6px;
      background: #fff;
      cursor: pointer;
      text-align: center;
      transition: all 0.3s;
    }
    .mode-button.active {
      border-color: #40a9ff;
      color: #40a9ff;
      background: #e6f7ff;
    }
    .form-card {
      background: #fff;
      border-radius: 6px;
      padding: 24px;
      box-shadow: 0 1px 4px rgba(0,0,0,0.03);
      margin-bottom: 24px;
    }
    .form-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 24px;
      padding-bottom: 16px;
      border-bottom: 1px solid #e5e6eb;
    }
    .form-title {
      font-size: 16px;
      font-weight: bold;
      color: #232a3b;
    }
    .capture-btn {
      background: #40a9ff;
      color: #fff;
      border: none;
      border-radius: 4px;
      padding: 8px 16px;
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 8px;
    }
    .capture-btn:hover {
      background: #1890ff;
    }
    .preview-container {
      display: none;
      margin: 16px 0;
    }
    .preview-container.active {
      display: block;
    }
    .preview-image {
      width: 100%;
      max-height: 200px;
      object-fit: contain;
      border: 1px solid #e5e6eb;
      border-radius: 4px;
    }
    .form-row {
      display: flex;
      gap: 24px;
      margin-bottom: 16px;
    }
    .form-group {
      flex: 1;
    }
    .form-label {
      display: block;
      margin-bottom: 8px;
      font-size: 14px;
      color: #232a3b;
    }
    .form-input {
      width: 100%;
      padding: 8px 12px;
      border: 1px solid #d9d9d9;
      border-radius: 4px;
      font-size: 14px;
      box-sizing: border-box;
    }
    .form-input:focus {
      border-color: #40a9ff;
      outline: none;
    }
    .scanner-area {
      display: none;
      margin-top: 24px;
    }
    .scanner-area.active {
      display: block;
    }
    .preview-box {
      width: 100%;
      height: 300px;
      border: 2px dashed #d9d9d9;
      border-radius: 6px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 16px;
      background: #fafafa;
    }
    .upload-area {
      margin-top: 24px;
    }
    .upload-title {
      font-size: 14px;
      color: #232a3b;
      margin-bottom: 16px;
    }
    .upload-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 16px;
    }
    .upload-item {
      border: 1px solid #d9d9d9;
      border-radius: 4px;
      padding: 16px;
      text-align: center;
    }
    .upload-item img {
      width: 100%;
      height: 120px;
      object-fit: cover;
      border-radius: 4px;
      margin-bottom: 8px;
    }
    .button-group {
      display: flex;
      justify-content: center;
      gap: 16px;
      margin-top: 32px;
      padding-top: 24px;
      border-top: 1px solid #e5e6eb;
    }
    .button-group button {
      padding: 8px 24px;
      border: none;
      border-radius: 4px;
      font-size: 14px;
      cursor: pointer;
    }
    .button-group button.primary {
      background: #40a9ff;
      color: #fff;
    }
    .button-group button.secondary {
      background: #f5f7fa;
      color: #232a3b;
    }
    .photo-buttons {
      display: flex;
      gap: 16px;
      margin-bottom: 16px;
    }
    .modal-overlay {
      display: none;
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: rgba(0, 0, 0, 0.5);
      z-index: 1000;
      align-items: center;
      justify-content: center;
    }
    .modal-overlay.active {
      display: flex;
    }
    .modal-content {
      background: #fff;
      border-radius: 8px;
      padding: 24px;
      width: 800px;
      max-width: 90vw;
    }
    .modal-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 24px;
      padding-bottom: 16px;
      border-bottom: 1px solid #e5e6eb;
    }
    .modal-title {
      font-size: 18px;
      font-weight: bold;
      color: #232a3b;
    }
    .modal-close {
      background: none;
      border: none;
      font-size: 24px;
      cursor: pointer;
      color: #999;
    }
    .camera-preview {
      width: 100%;
      height: 400px;
      background: #f5f7fa;
      border: 1px solid #e5e6eb;
      border-radius: 4px;
      margin-bottom: 24px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .camera-controls {
      display: flex;
      gap: 16px;
      justify-content: center;
    }
    .preview-grid {
      display: grid;
      grid-template-columns: repeat(2, 300px);
      gap: 24px;
      margin-bottom: 24px;
    }
    .preview-item {
      border: 1px solid #e5e6eb;
      border-radius: 8px;
      padding: 16px;
      background: #fff;
      box-shadow: 0 2px 8px rgba(0,0,0,0.05);
      width: 300px;
    }
    .preview-item-title {
      font-size: 14px;
      color: #666;
      margin-bottom: 12px;
      display: flex;
      align-items: center;
      gap: 8px;
    }
    .preview-item-title::before {
      content: '';
      display: block;
      width: 4px;
      height: 14px;
      background: #40a9ff;
      border-radius: 2px;
    }
    .id-card-preview {
      position: relative;
      width: 300px;
      height: 220px;
      background: #f5f7fa;
      border-radius: 4px;
      overflow: hidden;
    }
    .id-card-preview img {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      object-fit: contain;
    }
    .id-card-preview.empty {
      display: flex;
      align-items: center;
      justify-content: center;
      border: 2px dashed #e5e6eb;
      background: #fafafa;
    }
    .id-card-preview.empty::before {
      content: '';
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 48px;
      height: 48px;
      background-image: url("data:image/svg+xml,%3Csvg width='48' height='48' viewBox='0 0 48 48' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='48' height='48' rx='24' fill='%23F5F7FA'/%3E%3Cpath d='M24 16V32M16 24H32' stroke='%23D9D9D9' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
      background-size: contain;
      opacity: 0.5;
    }
    .id-card-preview.empty::after {
      content: '暂无照片';
      position: absolute;
      top: calc(50% + 32px);
      left: 50%;
      transform: translateX(-50%);
      color: #999;
      font-size: 12px;
    }
  </style>
</head>
<body>
  <div class="layout">
    <div class="sidebar">
      <h2>业信人力资源管理系统</h2>
      <ul>
        <li>客户管理</li>
        <li class="active">人员花名册</li>
        <li>合同管理</li>
        <li>薪酬管理</li>
        <li>系统设置</li>
      </ul>
    </div>
    <div class="main">
      <div class="topbar">
        <span class="title">新增员工</span>
        <div class="user">
          <span>管理员</span>
          <img src="https://via.placeholder.com/32x32.png?text=U" style="border-radius:50%;" alt="用户头像">
        </div>
      </div>
      <div class="content">
        <!-- 人员信息 -->
        <div class="form-card">
          <div class="form-header">
            <div class="form-title">人员信息（身份证）</div>
            <button class="capture-btn" onclick="openCameraModal('idCard', '身份证拍照')">
              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                <circle cx="12" cy="12" r="3"/>
                <path d="M19 9h-1.5M5 9h1.5M12 19v1.5M12 4.5V3"/>
              </svg>
              拍照录入
            </button>
          </div>
          <div class="form-row">
            <div class="form-group">
              <label class="form-label">姓名</label>
              <input type="text" class="form-input" placeholder="请输入姓名">
            </div>
            <div class="form-group">
              <label class="form-label">身份证号</label>
              <input type="text" class="form-input" placeholder="请输入身份证号">
            </div>
          </div>
          <div class="form-row">
            <div class="form-group">
              <label class="form-label">性别</label>
              <select class="form-input">
                <option value="">请选择性别</option>
                <option value="male">男</option>
                <option value="female">女</option>
              </select>
            </div>
            <div class="form-group">
              <label class="form-label">民族</label>
              <input type="text" class="form-input" placeholder="请输入民族">
            </div>
          </div>
          <div class="preview-grid">
            <div class="preview-item">
              <div class="preview-item-title">身份证正面照片</div>
              <div class="id-card-preview empty" id="idCardFrontPreview">
                <img src="" alt="身份证正面预览" style="display: none;">
              </div>
            </div>
            <div class="preview-item">
              <div class="preview-item-title">身份证背面照片</div>
              <div class="id-card-preview empty" id="idCardBackPreview">
                <img src="" alt="身份证背面预览" style="display: none;">
              </div>
            </div>
          </div>
        </div>

        <!-- 银行卡信息 -->
        <div class="form-card">
          <div class="form-header">
            <div class="form-title">银行卡信息</div>
            <button class="capture-btn" onclick="openCameraModal('bankCard', '银行卡拍照')">
              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                <circle cx="12" cy="12" r="3"/>
                <path d="M19 9h-1.5M5 9h1.5M12 19v1.5M12 4.5V3"/>
              </svg>
              拍照录入
            </button>
          </div>
          <div class="form-row">
            <div class="form-group">
              <label class="form-label">开户银行</label>
              <input type="text" class="form-input" placeholder="请输入开户银行">
            </div>
            <div class="form-group">
              <label class="form-label">银行卡号</label>
              <input type="text" class="form-input" placeholder="请输入银行卡号">
            </div>
          </div>
          <div class="preview-grid">
            <div class="preview-item">
              <div class="preview-item-title">银行卡正面照片</div>
              <div class="id-card-preview empty" id="bankCardFrontPreview">
                <img src="" alt="银行卡正面预览" style="display: none;">
              </div>
            </div>
            <div class="preview-item">
              <div class="preview-item-title">银行卡背面照片</div>
              <div class="id-card-preview empty" id="bankCardBackPreview">
                <img src="" alt="银行卡背面预览" style="display: none;">
              </div>
            </div>
          </div>
        </div>

        <!-- 社保卡信息 -->
        <div class="form-card">
          <div class="form-header">
            <div class="form-title">社保卡信息</div>
            <button class="capture-btn" onclick="openCameraModal('socialCard', '社保卡拍照')">
              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                <circle cx="12" cy="12" r="3"/>
                <path d="M19 9h-1.5M5 9h1.5M12 19v1.5M12 4.5V3"/>
              </svg>
              拍照录入
            </button>
          </div>
          <div class="form-row">
            <div class="form-group">
              <label class="form-label">社保卡号</label>
              <input type="text" class="form-input" placeholder="请输入社保卡号">
            </div>
            <div class="form-group">
              <label class="form-label">参保城市</label>
              <input type="text" class="form-input" placeholder="请输入参保城市">
            </div>
          </div>
          <div style="width: 300px;">
            <div class="preview-item">
              <div class="preview-item-title">社保卡照片</div>
              <div class="id-card-preview empty" id="socialCardPreview">
                <img src="" alt="社保卡预览" style="display: none;">
              </div>
            </div>
          </div>
        </div>

        <!-- 其他信息 -->
        <div class="form-card">
          <div class="form-header">
            <div class="form-title">其他信息</div>
          </div>
          <div class="form-row">
            <div class="form-group">
              <label class="form-label">工作岗位</label>
              <select class="form-input">
                <option value="">请选择岗位</option>
                <option>Java工程师</option>
                <option>前端工程师</option>
                <option>销售经理</option>
                <option>人事专员</option>
              </select>
            </div>
            <div class="form-group">
              <label class="form-label">入职日期</label>
              <input type="date" class="form-input">
            </div>
          </div>
        </div>

        <!-- 按钮组 -->
        <div class="button-group">
          <button class="secondary">取消</button>
          <button class="primary">保存</button>
        </div>

        <!-- 高拍仪弹窗 -->
        <div class="modal-overlay" id="cameraModal">
          <div class="modal-content">
            <div class="modal-header">
              <div class="modal-title" id="modalTitle">拍照录入</div>
              <button class="modal-close" onclick="closeCameraModal()">&times;</button>
            </div>
            <div class="camera-preview" id="cameraPreview">
              <span>正在加载高拍仪...</span>
            </div>
            <div class="camera-controls">
              <button class="capture-btn" onclick="capturePhoto()">拍照</button>
              <button class="capture-btn" onclick="recognizeInfo()">信息识别</button>
              <button class="capture-btn" onclick="confirmCapture()">确认</button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <script>
    let currentCaptureType = '';
    let currentPhotoType = 'front'; // 用于区分正反面

    function openCameraModal(type, title) {
      currentCaptureType = type;
      currentPhotoType = 'front'; // 默认拍摄正面
      document.getElementById('modalTitle').textContent = title;
      document.getElementById('cameraModal').classList.add('active');
      initCamera();
    }

    function closeCameraModal() {
      document.getElementById('cameraModal').classList.remove('active');
      stopCamera();
    }

    function initCamera() {
      // 这里添加初始化高拍仪的代码
      const preview = document.getElementById('cameraPreview');
      preview.innerHTML = '<img src="https://via.placeholder.com/800x400?text=Camera+Preview" style="width:100%;height:100%;object-fit:contain;">';
    }

    function stopCamera() {
      // 这里添加停止高拍仪的代码
    }

    function capturePhoto() {
      // 这里添加拍照的代码
      console.log('Capturing photo for: ' + currentCaptureType);
    }

    function recognizeInfo() {
      // 这里添加信息识别的代码
      console.log('Recognizing info for: ' + currentCaptureType);
    }

    function confirmCapture() {
      const previewId = currentCaptureType + (currentCaptureType === 'socialCard' ? '' : currentPhotoType) + 'Preview';
      const previewContainer = document.getElementById(previewId);
      
      if (currentCaptureType === 'idCard') {
        // 处理身份证照片预览
        previewContainer.classList.remove('empty');
        const previewImage = previewContainer.querySelector('img');
        previewImage.style.display = 'block';
        previewImage.src = 'https://via.placeholder.com/800x500?text=' + currentCaptureType + '_' + currentPhotoType;
      } else {
        // 处理其他类型的照片预览
        previewContainer.classList.add('active');
        const previewImage = previewContainer.querySelector('.preview-image');
        previewImage.src = 'https://via.placeholder.com/800x400?text=' + currentCaptureType + '_' + currentPhotoType;
      }
      
      if (currentPhotoType === 'front' && currentCaptureType !== 'socialCard') {
        currentPhotoType = 'back';
        document.getElementById('modalTitle').textContent += '（背面）';
      } else {
        closeCameraModal();
        currentPhotoType = 'front';
      }
    }
  </script>
</body>
</html> 